<!-- components/login-form/login-form.vue -->
<script setup>
	import { ref } from 'vue';

	// 表单数据
	const formData = ref({
		mobile: '13212345678',
		password: 'abc12345',
		alt: '关于我的描述',
	});

	const formRules = {
		mobile: {
			rules: [
				{ required: true, errorMessage: '请填写手机号码' },
				{
					pattern: '^[1][3-8][0-9]{9}$',
					errorMessage: '手机号码格式不正确',
				},
			],
		},
		password: {
			rules: [
				{ required: true, errorMessage: '请输入密码' },
				{ pattern: '^[a-zA-Z0-9]{8}$', errorMessage: '密码格式不正确' },
			],
		},
	};

	function outPut() {
		console.log(JSON.stringify(formData));
	}
</script>

<template>
	<!--:model => 数据源
	    :rules => 规则 -->
	<uni-forms label-width="0" :model="formData" :rules="formRules">
		<uni-forms-item name="mobile" ref="mobile">
			<uni-easyinput
				type="text"
				:clearable="false"
				v-model="formData.mobile"
				placeholder="请输入手机号0"
				@blur="(e) => $refs.mobile.onFieldChange(e.detail.value)"
			/>
		</uni-forms-item>
		<uni-forms-item name="password">
			<uni-easyinput
				type="password"
				:clearable="false"
				v-model="formData.password"
				placeholder="请输入密码"
			/>
		</uni-forms-item>
		<uni-forms-item>
			<uni-easyinput
				type="textarea"
				v-model="formData.alt"
				:clearable="false"
			/>
		</uni-forms-item>
	</uni-forms>
	<button class="uni-button" type="primary" @tap="outPut">提交</button>
</template>
